<template>
	<view>
		<view class="list-class" id="id_dingwei">
			<view v-if="ISNoData" class="NO-DATA-view-box-class">
				<image class="NO-DATA-image-view-class" src="@/static/NoDataBac.png"></image>
				<view class="NO-DATA-text-chushou-class">暂无数据</view>
			</view>
			<scroll-view v-else scroll-y="true" :style="'height:' + scroll_height+';width:694rpx;'"
				:scroll-top="scrollTop" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="onRefresh"
				@scrolltolower="lower">
				<view class="item" v-for="(indexItem,index) in carSrouceDataList" :key="index">
					<view class="item_box">
						<view @click="tap_item(indexItem)">
							<view class="view-box-22">
								<view class="item-title">{{indexItem.cars.model_name}}</view>
							</view>
							<view class="view-box-22 marginTop20">
								<view class="item-view-box-22" v-if="indexItem.cars.interior_name">
									车在{{indexItem.cars.interior_name}}
								</view>
								<view class="item-view-box-22" v-if="indexItem.cars.province_name">
									{{indexItem.cars.province_name}}
								</view>
							</view>
							<!-- <uniTextGrid :lineNum='4' :data='indexItem.nameList' /> -->
							<view></view>
							<view class="item-content-box">
								<view class="item-content">{{indexItem.cars.registration_time}}</view>
								<view class="item-content"> {{indexItem.cars.mileage}}</view>
							</view>
							<view class="item-number-time-box">
								<view>
									<view class="item-content-box">
										<view class="item-texr-price">{{indexItem.cars.price}}</view>
										<view class="item-text-wan">万</view>
										<view style="flex: 1;"></view>
									</view>
									<view v-if='indexItem.state==1' class="item-text-rulePrice">
										指导价：{{indexItem.cars.guide_price}}</view>
								</view>

								<view class="address-time-box">
									<view v-if='indexItem.state==1' class="store-text-view-class">车在东区店4s店</view>
									<view class="item-time" v-if="selecteItem!=0">{{indexItem.cars.create_time}}</view>
								</view>
							</view>
							<view class="user-member-class-box">
								<view class="user_name_view" v-if="indexItem.cars.user_name">
									{{indexItem.cars.user_name}}
								</view>
								<image class="gongsi-geren-image-class" src="@/static/gongsi-save.png"
									v-if='indexItem.state==1'></image>
								<image class="gongsi-geren-image-class" src="@/static/geren-save.png" v-else></image>
								<image :src="indexItem.cars.cover_url" class="member-image-class"></image>
							</view>
						</view>
					</view>

				</view>
				<view v-if="isShowMore" class="no-more-text-bottom-class">没有更多了</view>
				<view v-else class="no-more-text-bottom-class"></view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	import uniListCarSource from '@/components/uniListCarSource/uniListCarSource.vue'
	import utils from '@/utils/utils'
	import {
		collectionList,
		getUsedCarDetails
	} from '@/api/secondhandCar.js'
	export default {
		components: {
			
			uniListCarSource
		},
		data() {
			return {
				page: 1, //第几页数据
				page_num: 6,
				last_page: 0, //总页数
				isShowMore: false,
				scrollTop: 0,
				scroll_height: '',

				isEnd: false,
				triggered: false,
				isfreshing: false,
				isShowList: true,


				selecteItem: 2,
				users_id: '',
				endName: '',

				carSrouceDataList: [],

				ISNoData: false,
				isFirst: true

			}
		},
		onShow() {
			try {
				this.$utils.stopPage() //禁止页面本身的滑动
				if (!this.isFirst) {
					this.pageGetcollectionList()
				} else {
					this.isFirst = false
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		/**
		 * onHide()触发的场景：
		 *导航页1>>导航页2，会触发导航页1  onHide（）
		 *
		 *导航页>>子页面，会触发导航页  onHide（）
		 *
		 *子页面1>>子页面2，会触发子页面1  onHide（）
		 **/
		onHide() {
			try {
				this.$utils.movePage()
			} catch (e) {
				//TODO handle the exception
			}
		},
		/**
		 *onUnload()触发的场景：
		 *从子页面2返回到子页面1，会触发子页面2的onUnload()
		 *
		 *从子页面返回到导航页，会触发子页面的onUnload()
		 */
		onUnload() {
			try {
				this.$utils.movePage()
			} catch (e) {
				//TODO handle the exception
			}
		},
		onLoad() {
			const value = uni.getStorageSync('login')
			if (value) {
				this.users_id = value.id
			}
			const location = uni.getStorageSync('address')
			this.$utils.log("dayiin huoqudao de xinagqing location  " + JSON.stringify(location))
			if (location) {
				this.endName = location.name
			}
			this.pageGetcollectionList()
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#id_dingwei').boundingClientRect(data => {
				this.$utils.log("得到布局位置信息" + JSON.stringify(data));
				var that = this
				that.isShowList = false
				that.$nextTick(() => {
					that.scroll_height = uni.getSystemInfoSync().windowHeight - data.top + 'px';
					that.isShowList = true
					this.$utils.log("that.scroll_height  " + that.scroll_height);
				})

			}).exec();
		},
		methods: {
			tap_item(item) {
				utils.log("我的收藏页面点击item" + JSON.stringify(item))
				if (item.cars.status == 1) {
					var that = this
					getUsedCarDetails(item.cars_id, this.users_id, this.endName).then(res => {
						if (res.code == 0) {
							that.dataObject = res.data
							that.$utils.log("点击了item项" + JSON.stringify(item))
							uni.navigateTo({
								url: '/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=' +
									item.cars_id + '&isContent=' + true,
								events: {
									// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
									acceptDataFromOpenedPage: function(data) {
										that.$utils.log("打印返回数据 acceptDataFromOpenedPage  " + JSON
											.stringify(data))
									},
									someEvent: function(data) {
										that.$utils.log("打印返回数据 someEvent   " + JSON.stringify(data))
									}
								},
								success: function(res) {
									that.$utils.log("打印发送数据 success   " + JSON.stringify(that
										.dataObject))
									// 通过eventChannel向被打开页面传送数据
									res.eventChannel.emit('acceptDataFromOpenerPage', that.dataObject)
								},
								fail: function(error) {
									that.$utils.log("打印发送数据 fail   " + JSON.stringify(error))
								}
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				} else {
					uni.showToast({
						title: '车源不存在',
						icon: 'none'
					})
				}
			},
			pageGetcollectionList() {
				var that = this
				collectionList(this.users_id, this.page_num, this.page).then(res => {
					that.$utils.log("打印获取到的我的收藏列表数据  " + JSON.stringify(res))
					if (res.code == 0) {
						that.$nextTick(() => {
							if (that.page == 1) {
								that.carSrouceDataList = []
								that.carSrouceDataList = res.data.data
								that.triggered = false
								that.isfreshing = false
							} else {
								for (var i = 0; i < res.data.data.length; i++) {
									that.carSrouceDataList.push(res.data.data[i]); // 加载的数据追加在上一页后面
								}
								that.isEnd = false
							}
							that.last_page = res.data.last_page
							that.$forceUpdate()
							if (that.last_page == that.page) {
								that.isShowMore = true
								setTimeout(() => {
									that.isShowMore = false
								}, 3000)
							} else {
								that.isShowMore = false
							}
							if (that.carSrouceDataList.length > 0) {
								that.ISNoData = false
							} else {
								that.ISNoData = true
							}
						})
					} else {
						that.carSrouceDataList = []
						that.ISNoData = true
					}

				})
			},
			onRefresh() {
				if (!this.triggered) {
					if (this.isfreshing) return;
					this.isfreshing = true;
					if (!this.triggered) {
						this.triggered = true;
					}
					this.page = 1
					this.$utils.log("触发下拉刷新  第1个  111111 refresherrefreshFun")
					this.pageGetcollectionList()
				}
			},

			lower() {
				if (!this.isShowMore) {
					if (!this.isEnd) {
						this.isEnd = true
						if (this.page < this.last_page) {
							this.page = this.page + 1
							this.pageGetcollectionList()
						} else {
							this.$utils.log("没有数据了")
							uni.showToast({
								title: '没有数据了',
								icon: 'none'
							})
						}

					}
				}
				if (this.isShowMore) {
					setTimeout(() => {
						this.isShowMore = false
					}, 2000)
				}
			}
		}
	}
</script>

<style>
	page {
		background: #F0F0F0;
	}

	.list-class {
		margin-top: 26rpx;
		padding: 0rpx 28rpx;
	}

	.item-view-box-22 {
		width: auto;
		background: #EDF1FF;
		border-radius: 8rpx;

		text-align: center;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #0E59EA;
		opacity: 1;

		padding: 8rpx 30rpx;
		margin: 0rpx 4rpx;
	}

	.view-box-22 {
		display: flex;
		flex-flow: row;
		height: auto;
		width: 100%;
		align-items: center;
		justify-content: flex-start
	}

	.marginTop20 {
		margin-top: 20rpx;
	}

	.item_box {
		margin-bottom: 14rpx;
		padding: 38rpx 22rpx 24rpx 28rpx;

		background: #FFFFFF;
		opacity: 1;
		border-radius: 14rpx;
	}

	.item-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: black;

		font-size: 32rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		line-height: 1.5;
		width: 520rpx;
	}

	.item-content-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item-content {
		margin: 16rpx 24rpx 12rpx 0rpx;

		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.item-number-time-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx 0rpx;
	}

	.item-texr-price {
		text-align: left;

		font-size: 38rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #ED2F2F;
		opacity: 1;
	}

	.item-text-wan {
		margin-left: 12rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.item-text-rulePrice {
		margin-left: 10rpx;
		margin-top: 10rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.item-time {
		flex: 1;
		text-align: right;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
		margin-top: 10rpx;
	}

	.item-sendTime {
		margin-top: 20rpx;

		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.line-2 {
		height: 0rpx;
		border: 1px solid #00000006;

		width: 100%;
		margin-top: 20rpx;
	}

	.item-btn-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.item-btn {
		flex: 1;
	}

	.item-btn-del {
		border: 2px solid #00000012;
		border-radius: 26rpx;

		text-align: right;
		color: black;
		padding: 6rpx 50rpx;

		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		opacity: 1;
	}

	.item-btn-up {
		background: #0E59EA;
		opacity: 1;
		border-radius: 26rpx;
		padding: 6rpx 50rpx;
		margin-left: 10rpx;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 1;
	}

	.no-more-text-bottom-class {
		height: 180rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
		margin-top: 46rpx;
	}

	.NO-DATA-view-box-class {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.NO-DATA-image-view-class {
		width: 380rpx;
		height: 380rpx;
		margin: auto;
		margin-top: 208rpx;
	}

	.NO-DATA-text-chushou-class {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1C2125;
		opacity: 1;
	}

	.car_isNew {
		border: 1px solid #0E59EA;
		opacity: 1;
		border-radius: 6rpx;
		padding: 2rpx 8rpx 4rpx 8rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #fff;
		margin-left: 12rpx;
		background-color: #0E59EA;
	}

	.address-time-box {
		flex: 1;
		text-align: right;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.user_name_view {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.gongsi-geren-image-class {
		width: 38rpx;
		height: 34rpx;
		margin-left: 6rpx;
		margin-right: 8rpx;
	}

	.member-image-class {
		width: 108.1rpx;
		height: 36.09rpx;
	}

	.user-member-class-box {
		display: flex;
		flex-direction: row;
	}

	.store-text-view-class {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
</style>